iT邦幫忙

2022 iThome 鐵人賽

DAY 13
0
Mobile Development

如何成為IOS初級工程師系列 第 13

Day-13 顯示畫面的重要小人物 - UI元件

  • 分享至 

  • xImage
  •  

今天會帶大家認識常用的UI元件,科普一下什麼是UI元件呢?
UI(User Interface)中文稱為使用者介面,簡單來說就是使用者在手機上看到的畫面。而UI元件就是畫面上的文字、選單、按鈕、圖片等等所有一切可以組成畫面的東西
先推薦一個神人設計師,幾乎把所有元件都設計出來,如果在iphone裡看到不知道的元件可以進來這裡找找,也可以先進來多認識有什麼元件可以使用。
UIKit官方文件是最詳細的資源,如果有心想要學的扎實,有遇到問題都在這找資源。

進入正題

今天會簡單介紹最常用也最常看到的元件

  • UILabel
  • UIButton
  • UIImageView
  • UISwitch
  • UISlider
  • UITextField
  • UISegmentedControl
  • Page Control
  • Date Picker

https://ithelp.ithome.com.tw/upload/images/20220928/20152659hGVY6KVhTL.png

UILabel

常用在顯示文字,簡單來說顯示畫面上的文字幾乎都是UILabel,上圖中的藍色框框就是UILabel

UIButton

按鈕,用於給使用者點擊觸發事件,進行互動,上圖畫面中橘色框框就是按鈕

ImageView

用於顯示圖片,上圖中紅色框框就是UIImageView

UISwitch

簡單來說就是開關,跟電燈開關一樣的概念
https://ithelp.ithome.com.tw/upload/images/20220928/20152659U9gH0UYWIe.png

UISlider

滑桿,可以設定最大值最小值對白色圓球進行滑動
https://ithelp.ithome.com.tw/upload/images/20220928/201526593BjYQxzdjc.png

UITextField

輸入框,可以讓使用者輸入文字
https://ithelp.ithome.com.tw/upload/images/20220928/20152659ozlUCReToK.png

UISegmentedControl

常用來做功能或分類的切換,只少要兩個選項,沒有上限
https://ithelp.ithome.com.tw/upload/images/20220928/20152659Cq73PCNpiD.png

Page Control

用小圓點來顯示有幾個分頁,還有目前顯示的分頁
https://ithelp.ithome.com.tw/upload/images/20220928/20152659IPp6HMnGUn.png

Date Picker

讓使用者選擇日期,非常好用
https://ithelp.ithome.com.tw/upload/images/20220928/20152659zsZNmN9KrQ.png

今天教的只是冰山一角,但對於初學的你來說已經可以做出非常多有趣的功能,再加上之後會介紹的UITableView,UICollectionView等列表,基本上就可以做出完整的App了。


上一篇
Day-12 UIViewController & 生命週期(Life Cycle)
下一篇
Day-14 真正的高手都應該學會佈局 - Auto Layout(使用SnapKit)
系列文
如何成為IOS初級工程師30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言